<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>轮播图</title>
    <link rel="stylesheet" href="./css/index.css">
</head>

<body>
    <div class="container">
        <div class="item active">
            <img src="./images/心明眼亮.webp" alt="">
        </div>
        <div class="item">
            <img src="./images/疾风已有归途.webp" alt="">
        </div>
        <div class="item">
            <img src="./images/真正的大师永远怀着一颗学徒的心.webp" alt="">
        </div>
        <div class="item">
            <img src="./images/长枪依在.webp" alt="">
        </div>
        <ul class="circles">
            <li class="circle on"></li>
            <li class="circle"></li>
            <li class="circle"></li>
            <li class="circle"></li>
        </ul>
        <!-- 左边按钮 右边按钮 -->
        <div class="btn-left"></div>
        <div class="btn-right"></div>
    </div>
    <script>
        let items = document.querySelectorAll('.item');
        let circles = document.querySelectorAll('.circle')
            // 先自动播放
        let index = 0;
        let timerId = null;

        function autoPlay() {
            timerId = setInterval(function() {
                items[index].classList.remove('active');
                circles[index].classList.remove('on')
                index++
                if (index === 4) {
                    index = 0;
                }
                items[index].classList.add('active');
                circles[index].classList.add('on')

            }, 1000)
        }
        autoPlay()
            // 鼠标移入，移出
        function mouseEvent() {
            //获取container
            let level = document.querySelector(".container");
            level.addEventListener("mouseenter", function() {
                //鼠标移入的时候清除定时器
                clearInterval(timerId);
                timerId = null;
            });
            level.addEventListener("mouseleave", function() {
                //鼠标移出的时候继续自动播放
                autoPlay();
            })
        }
        mouseEvent()
            // 鼠标点击事件
        function mouseBtn() {
            // 左边按钮
            let lbtn = document.querySelector('.btn-left');
            lbtn.addEventListener('click', function() {
                    items[index].classList.remove('active');
                    circles[index].classList.remove('on');
                    index--;
                    if (index === -1) {
                        index = 3;
                    }
                    items[index].classList.add("active");
                    circles[index].classList.add("on");
                })
                // 右边按钮
            let rbtn = document.querySelector('.btn-right');
            rbtn.addEventListener('click', function() {
                items[index].classList.remove('active');
                circles[index].classList.remove('on');
                index++;
                if (index === 4) {
                    index = 0;
                }
                items[index].classList.add("active");
                circles[index].classList.add("on");
            })
        }
        mouseBtn()

        // 点击圆点
        function picChange() {

            //先把圆点的每一个遍历出来
            circles.forEach(function(cir, i) {
                cir.addEventListener("click", function() { //点击圆点的时候发生的事件
                    //先把图片和圆点的默认样式去除，从全局变量的index = 0获取
                    items[index].classList.remove("active");
                    circles[index].classList.remove("on");

                    index = i; //这一步就是将lis的索引值传给index
                    //然后添加
                    cir.classList.add("on");
                    items[i].classList.add("active");
                })
            })

        }
        picChange()
    </script>
</body>

</html>